<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var xmlHttpReq;
	function check()
	{
		
		// 1. 用户输入的名字
		var username = document.getElementById("username").value;
		console.log(username);
		
		// 2. 创建ajax的对象
		xmlHttpReq = new XMLHttpRequest();
		// 设定数据回来后处理的方法
		xmlHttpReq.onreadystatechange = handle;
		
		// 3. 请求数据 
		var url = "checkname?username="+username;
		// true 异步方式  不会卡主界面	发出请求后会继续往下运行
		// false 同步方式 会卡主界面	发出请求后会等待服务器返回信息再向下运行
		xmlHttpReq.open("get",url,false);
		xmlHttpReq.send();
		
	}
	
	// 处理ajax请求回来的数据
	function handle()
	{
		// 判断下状态0~4,4 表示数据已经回来了
		if(xmlHttpReq.readyState==4)
		{
			// 响应码200 正常
			if(xmlHttpReq.status == 200)
			{
				console.log(xmlHttpReq.responseText);
				
				// 找到span界面对象
				var span = document.getElementById("result");
				console.log(span);
				// 字符串解析为json对象
				var r = JSON.parse(xmlHttpReq.responseText);
				console.log(r);
				// 显示到span中
				span.innerHTML = r.result;
			}	
		}
	}

</script>
</head>
<body>

<form action=checkname>
用户名:<input id="username" type="text" name="username" onkeyup="check()" /><span id="result"></span><br />
密码:<input type="password" name="password" /><br />
<input type="submit" value="注册" />

</form>

</body>
</html>